<!DOCTYPE html>
<html lang="zh" xmlns:th=http://www.thymeleaf.org style="height: 100%">

<head>
  <meta charset=UTF-8>
  <title>数据统计/周</title>
  <link rel="icon" type="image/x-icon" href="http://image.fangweb.top/FANG-Logo.png" />
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js"></script>
</head>

<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>



<script th:inline="javascript">
  const _MyRawData = [[${dataSet}]];  // 拿到数据
  const _titleECharts = [[${date}]];
  const _titleText = 'Statistics 7 days before ' + _titleECharts;

  const _title = [[${title}]];      //标题
  document.title = _title;

</script>

<script type="text/javascript">
  var dom = document.getElementById("container");
  var myChart = echarts.init(dom);
  var app = {};

  var option;

  const transformCN = {
    subscription: '被订阅数量',
    collection: '博客收藏数量',
    pageviews: '博客查阅数量',
    comment: '博客评论数量',
    likes: '博客点赞数量'
  };
  //转时间戳 实际使用时上面数据直接塞时间戳就好
  for (let i = 1; i < _MyRawData.length; i++) {
    _MyRawData[i][2] = moment(_MyRawData[i][2]).unix()
  }
  run(_MyRawData)

  function run(_rawData) {
    const Type = [
      'subscription',
      'collection',
      'pageviews',
      'comment',
      'likes',
    ];

    const datasetWithFilters = [];
    const seriesList = [];
    echarts.util.each(Type, function (type) {
      var datasetId = 'dataset_' + type;
      datasetWithFilters.push({
        id: datasetId,
        fromDatasetId: 'dataset_raw',
        transform: {
          type: 'filter',
          config: {
            and: [
              // { dimension: 'createTime', gte: 2000 },
              {dimension: 'type', '=': type}
            ]
          }
        }
      });
      seriesList.push({
        type: 'line',
        datasetId: datasetId,
        showSymbol: false,
        name: type,
        endLabel: {
          show: true,
          formatter: function (params) {						// 折线端点标签信息展示
            return params.value[1] + ':' + params.value[0]
          }
        },
        labelLayout: {
          moveOverlap: 'shiftY'								// 表示标签重叠时表示垂直方向依次位移
        },
        emphasis: {
          focus: 'series'											//设置高亮状态，鼠标放上去时其他折线隐藏
        },
        encode: {					//设置数据位置编码对象
          x: 'createTime',			// year数据映射到X轴
          y: 'number',		// amount数据映射到X轴
          label: ['number'],
          itemName: 'createTime',
        }
      });
    });
    option = {
      animationDuration: 10000,		// 初始动画的时长
      dataset: [									// 数据集
        {
          id: 'dataset_raw',
          source: _rawData
        },
        // 过滤后的数据
        ...datasetWithFilters
      ],
      title: {
        text: _titleText
      },
      tooltip: {
        order: 'valueDesc',					//根据数据值, 降序排列。
        trigger: 'axis',							//坐标轴触发
        //自定义tooltip框内容
        formatter(params) {
          let str = `${moment.unix(params[0].value[2]).format('YYYY-MM-DD')}`
          params.forEach(item => {
            let strArr = `<div style="display:flex;justify-content:space-between;flex-direction:row;width:200px;margin-top:5px"><span>${item.marker}${transformCN[item.value[1]]} </span><span style="font-weight:bold"> ${item.value[0]}</span > </div>`
            str += strArr
          })
          return str
        }
      },
      toolbox: {
        show: true,                       // 显示工具栏
        feature: {
          saveAsImage: {                  // 保存图片，为png格式
            type: "png"
          }
        }
      },
      xAxis: {
        type: 'category',						//类目轴
        nameLocation: 'middle',			//坐标轴名称显示位置
        // x轴label 名称
        axisLabel: {
          formatter: function (params) {
            return moment.unix(params).format('YYYY-MM-DD')
          },
          interval: 0,               // 数据全部显示
          rotate: 45
        },

      },
      yAxis: {
        name: 'Total Number'							// 坐标轴名称,可以随意更改
      },
      grid: {
        right: 140									// 距离右边长度
      },
      series: seriesList						// 管理折线图对象
    };
    myChart.setOption(option);
  }

  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }

</script>
</body>

</html>
